<!--薪资档案界面-->

<template>
<!--标题-->
  <div style="height:7vh;padding:10px 20px;background-color: rgba(163,62,230,0.22);text-align: center">
    <span style="line-height: 60px;font-size:20px;">薪资档案</span>
  </div>



  <!--工资搜索卡片-->
<el-card style="margin:20px;height: 70px;">

  <el-form :inline="true" align="center">

    <!--      根据 查询 -->
    <el-from-item label="根据名字档案查询查询">
      姓名:<el-input placeholder="请输入员工名字查询"
                     style="width: 200px;"
                     v-model="searchFilesForm.name"
                     @keydown.enter="loadFiles"/>
    </el-from-item>

    <!--查询按钮   -->
    <el-from-item>
      <el-button :icon="Search" size="large" box type="primary" @click="loadFiles" />
      <el-button  size="large" @click="resetSearch">重置</el-button>
    </el-from-item>
  </el-form>
</el-card>

  <!--  工资条数据表格卡片-->
<el-card style="margin: 20px">
  <el-table :data="FilesArr" style="width:100%;" @selection-change="handleSelectionChange" >
    <el-table-column label="员工编号" prop="staffId" width="80" align="center"/>
    <el-table-column label="员工姓名" prop="name" align="center"/>
    <el-table-column label="基本工资" prop="basicSalary" align="center"/>
    <el-table-column label="失业保险" prop="unemploymentBenefits" align="center" :formatter="formatPercentage"/>
    <el-table-column label="医疗保险" prop="medicalInsurance" align="center" :formatter="formatPercentage"/>
    <el-table-column label="养老保险" prop="oldAgePension" align="center" :formatter="formatPercentage"/>
    <el-table-column label="公积金" prop="accumulationFund" align="center" :formatter="formatPercentage"/>
    <el-table-column label="个人所得税" prop="individualIncomeTax" align="center" :formatter="formatPercentage"/>

    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template #default="scope">
        <el-button @click="UpdateDetails(scope.row.staffId)">编辑</el-button>
      </template>

    </el-table-column>
  </el-table>
</el-card>

<!-- 弹窗数据 -->
<el-dialog @click="dialogTitle" v-model="dialogVisible" :before-close="handleClose"
           style="width:1200px;padding:40px;">
<el-form label-width="80px" label-position="top">
 <el-row :gutter="30">
   <el-col :span="8">
     <el-form-item label="员工编号">
       <el-input  v-model="saveFilesForm.staffId" disabled />
     </el-form-item>
   </el-col>
   <el-col :span="8">
     <el-form-item label="员工姓名">
       <el-input  v-model="saveFilesForm.name" disabled/>
     </el-form-item>
   </el-col></el-row>
   <el-row>
   <el-col :span="8">
     <el-form-item label="基本工资">
       <el-input placeholder="请输入基本工资" v-model="saveFilesForm.basicSalary" />
     </el-form-item>
   </el-col>
 </el-row>
  <el-row>
   <el-col :span="7">
     <el-form-item label="失业保险">
       <el-input placeholder="请输入失业保险" v-model="saveFilesForm.unemploymentBenefits" />
     </el-form-item>
   </el-col>
    <el-col :span="1"></el-col>
    <el-col :span="7">
      <el-form-item label="医疗保险">
        <el-input placeholder="请输入医疗保险" v-model="saveFilesForm.medicalInsurance" />
      </el-form-item>
    </el-col>
    <el-col :span="1"></el-col>
    <el-col :span="7">
    <el-form-item label="养老保险">
      <el-input placeholder="请输入养老保险" v-model="saveFilesForm.oldAgePension" />
    </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="7" >
      <el-form-item label="公积金">
    <el-input placeholder="请输入公积金" v-model="saveFilesForm.accumulationFund" />
      </el-form-item>
    </el-col>
    <el-col :span="1"></el-col>
    <el-col :span="7" >
      <el-form-item label="个人所得税">
      <el-input placeholder="请输入个人所得税" v-model="saveFilesForm.individualIncomeTax" />
      </el-form-item>
    </el-col>
  </el-row>
</el-form>
  <template #footer>
    <el-button type="primary" @click="saveFiles">确定</el-button>
    <el-button @click="handleClose">取消</el-button>

  </template>
</el-dialog>
</template>

<script setup>
import {onMounted,  ref} from "vue";
import {ElMessage} from "element-plus";
import {Search} from "@element-plus/icons-vue";
import qs from "qs";
import axios from "axios";
import htmlToExcel from "@/utils/htmlToExcel";
//<-- 搜索板块 -->
//定义对象用来保存工资搜索条件 员工编号
const searchFilesForm = ref({});

//定义搜索卡片重置按钮
const resetSearch = () => {
  searchFilesForm.value = {};
  loadFiles();
};

//百分比显示
function formatPercentage(row, column, cellValue) {
  return `${(cellValue * 100).toFixed(2)}%`;
}

//定义数组来保存工资数据
const FilesArr = ref([]);

//定义加载工资数据
const loadFiles = () => {
  let data = qs.stringify(searchFilesForm.value );
  axios.get('http://localhost:8095/v1/salaryFiles/select?'+data).then((response)=>{
    if(response.data.code == 2000){
      FilesArr.value = response.data.data;
      console.log(FilesArr.value)

    }else{
      ElMessage.error(response.data.msg);
    }
  })
};

//页面一加载完毕,立即执行
onMounted(()=>{
  loadFiles();

})













// 查看详情弹框
const dialogVisible = ref(false);
// 弹框标题
const dialogTitle = ref('更改薪资档案');

// 编辑按钮
const UpdateDetails = (staffId) => {
  dialogVisible.value = true;
  dialogTitle.value = '查看工资表详情';
  axios.get('http://localhost:8095/v1/salaryFiles/select?staffId='+staffId).then((response)=>{
    if(response.data.code == 2000){
      saveFilesForm.value = response.data.data[0];
      console.log(saveFilesForm.value)

    }else{
      ElMessage.error(response.data.msg);
    }
  })
};
//完善关闭弹窗功能
const handleClose = ()=>{
  if(confirm('您确认要关闭本弹窗吗?')){
    //关闭弹窗
    dialogVisible.value = false;
    //清空已输入的表单数据
    saveFilesForm.value = {}
  }
}


//修改对象保存信息
const saveFilesForm = ref({
  staffId: '',
  name: '',
  basicSalary: '',
  unemploymentBenefits: '',
  medicalInsurance: '',
  oldAgePension: '',
  accumulationFund: '',
  individualIncomeTax: '',
});


//编辑按钮 出弹窗 提交数据
const saveFiles= () => {
 let data = qs.stringify(saveFilesForm.value);
 console.log(data);
 axios.post('http://localhost:8095/v1/salaryFiles/update',data).then((response)=>{
   if(response.data.code == 2000){
     ElMessage.success(response.data.msg);
     dialogVisible.value = false;
     loadFiles();
   }else{
     ElMessage.error(response.data.msg);
   }
})


};

</script>



<style scoped>

</style>